<template>
  <div>
    <VolBox :lazy="true" :model.sync="model" title="商品列表--编辑" :width="950" :height="550">
      <VolForm ref="myform" :loadKey="true" :label-width="100" :formFields="formFields1"
        :formRules="formRules">
      </VolForm>
      <el-form class="demoFormInline" label-width="100px">
        <el-form-item label="产品规格：">
          <el-radio v-model="specType" :label="10">单规格</el-radio>
          <el-radio v-model="specType" :label="20">多规格</el-radio>
          <div v-for="(i, ii) in specTypeList" :key="ii">
            <span class="marL10" v-if="specType === 20">规格名称</span>
            <el-input class="w100" v-if="specType === 20" v-model="i.spec_name" size="small" />
            <span>原价格</span>
            <el-input class="w70" v-model="i.line_price" size="small" />
            <span>优惠价格</span>
            <el-input class="w70" v-model="i.product_price" size="small" />
            <span class="marL10">包装费</span>
            <el-input class="w70" v-model="i.bag_price" size="small" />
            <span class="marL10">库存数量</span>
            <el-input class="w70" v-model="i.stock_num" size="small" />
            <Button v-if="i.id == 1 && specType == 20" type="default" @click="addGG">增加</Button>
            <Button v-else-if="i.id != 1 && specType == 20" type="default"
              @click="delGG(i)">删除</Button>
          </div>
        </el-form-item>
        <el-form-item label="产品属性：">
          <Button type="default" @click="addSX">增加</Button>
          <div v-for="(i,ii) in formsxList" :key="ii">
            <div class="mabo10">
              <span>名称</span>
              <el-input class="w100" v-model="i.name" size="small" />
              <span class="marL10">值</span>
              <el-input class="w100" v-model="i.value1" size="small" />
              <el-input class="w100" v-model="i.value2" size="small" />
              <el-input class="w100" v-model="i.value3" size="small" />
              <el-input class="w100" v-model="i.value4" size="small" />
              <el-input class="w100" v-model="i.value5" size="small" />
              <Button type="default" @click="delSX(i)">删除</Button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <VolForm ref="myform2" :label-width="100" :formFields="formFields2" :formRules="formRules2"
        :editor="editor"></VolForm>
      <div slot="footer">
        <Button type="error" @click="submit1">保存</Button>
        <Button type="info" @click="model = false">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
var vueParam = {
  components: {
    VolBox,
    VolForm,
  },
  data() {
    return {
      model: false,
      specType: 10,
      specTypeList: [
        {
          id: 1,
          spec_name: "",
          product_price: "",
          bag_price: "",
          stock_num: "",
          line_price: "",
          product_no: "",
        },
      ],
      formsxList: [],
      formFields1: {
        supplierCode: "",
        product_status: "",
        limit_num: "",
        product_sort: "",
        sales_initial: "",
        product_name: "",
        selling_point: "",
        category_id: "",
        deduct_stock_type: "",
        product_unit: "",
        special_id: "",
        product_price: "",
        bag_price: "",
        product_stock: "",
      },
      formFields2: {
        content: "",
      },
      formRules: [
        [
          {
            dataKey: "",
            data: [],
            title: "餐厅名称",
            required: true,
            field: "supplierCode",
            type: "select",
          },
          {
            title: "产品名称",
            required: true,
            field: "product_name",
            type: "text",
          },
          {
            field: "product_no",
            title: "产品编码",
            type: "text",
            require: true,
            disabled: true,
          },
        ],
        [
          {
            dataKey: "",
            data: [
              { key: 10, value: "下单减库存" },
              { key: 20, value: "付款减库存" },
            ],
            title: "库存计算方式",
            field: "deduct_stock_type",
            type: "radio",
            disabled: true,
          },
          {
            dataKey: "",
            data: [
              { key: 0, value: "无" },
              { key: 1, value: "新品" },
              { key: 2, value: "热卖" },
            ],
            title: "特殊分类",
            field: "special_id",
            type: "radio",
          },
          {
            dataKey: "FoodProUnit",
            data: [],
            title: "产品单位",
            field: "product_unit",
            type: "select",
            disabled: true,
          },
        ],
        // [
        //   { title: "产品一口价", field: "product_price", type: "text" },
        //   { title: "包装费", field: "bag_price", type: "text", disabled: true },
        // ],
        [
          {
            title: "产品总库存",
            field: "product_stock",
            type: "text",
            disabled: true,
          },
          {
            title: "初始销量",
            field: "sales_initial",
            type: "text",
            disabled: true,
          },
          {
            title: "产品排序",
            field: "product_sort",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "限购数量",
            field: "limit_num",
            type: "number",
            disabled: true,
          },
          {
            title: "产品状态",
            field: "product_status",
            type: "radio",
            dataKey: "",
            data: [
              { key: 10, value: "上架" },
              { key: 20, value: "下架" },
            ],
          },
          {
            title: "产品卖点",
            field: "selling_point",
            type: "text",
            disabled: true,
          },
        ],
      ],
      formRules2: [
        [{ title: "产品详情", field: "content", type: "editor", colSize: 12 }],
      ],
      editor: {
        uploadImgUrl: "/api/Fproduct/Upload",
      },
    };
  },
  created() {
    this.GetVueDictionary();
  },
  methods: {
    getFormOption(field) {
      let option;
      this.formRules.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    GetVueDictionary() {
      let supplierCode = this.getFormOption("supplierCode");
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["restaurants"])
        .then((res) => {
          res.forEach((o) => {
            if (o.dicNo == "restaurants") {
              supplierCode.data = o.data;
            }
          });
        });
    },
    getLIST(val) {
      this.model = true;
      this.formFields2.content = val.content;
      this.specType = val.spec_type;
      // this.formFields1 = {};
      // this.formFields1 = val;
      this.formFields1.product_id = val.product_id;
      this.formFields1.supplierCode = val.supplierCode;
      this.formFields1.product_status = val.product_status;
      this.formFields1.limit_num = val.limit_num;
      this.formFields1.product_sort = val.product_sort;
      this.formFields1.sales_initial = val.sales_initial;
      this.formFields1.product_name = val.product_name;
      this.formFields1.selling_point = val.selling_point;
      this.formFields1.category_id = val.category_id;
      this.formFields1.deduct_stock_type = val.deduct_stock_type;
      this.formFields1.product_unit = val.product_unit;
      this.formFields1.special_id = val.special_id;
      this.formFields1.product_price = val.product_price;
      this.formFields1.bag_price = val.bag_price;
      this.formFields1.product_stock = val.product_stock;
      this.formFields1.product_no = val.product_no;
      console.log(this.formFields1);
      this.formsxList = [];
      if (val.product_attr != null) {
        let product_attr = JSON.parse(val.product_attr);
        if (product_attr.length > 0) {
          product_attr.forEach((i, ii) => {
            let obj = {};
            obj.id = ii + 1;
            obj.name = i.name;
            obj.value1 = i.value[0];
            obj.value2 = i.value[1];
            obj.value3 = i.value[2];
            obj.value4 = i.value[3];
            obj.value5 = i.value[4];
            this.formsxList.push(obj);
          });
        }
      }
    },
    addGG() {
      let obj = {
        id: new Date().getTime() + Math.floor(Math.random() * 10000000) + 1,
        spec_name: "",
        product_price: "",
        bag_price: "",
        stock_num: "",
        line_price: "",
        product_no: "",
      };
      this.specTypeList.push(obj);
    },
    delGG(e) {
      this.specTypeList = this.specTypeList.filter((i) => {
        return i.id != e.id;
      });
    },
    addSX() {
      let obj = {
        id: new Date().getTime() + Math.floor(Math.random() * 10000000) + 1,
        name: "",
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
      };
      this.formsxList.push(obj);
    },
    delSX(e) {
      this.formsxList = this.formsxList.filter((i) => {
        return i.id != e.id;
      });
    },
    submit1() {
      let arrList = JSON.parse(JSON.stringify(this.formsxList));
      let arr = [];
      let status = false;
      let status2 = false;
      if (this.specType === 10) {
        this.specTypeList[0].spec_name = this.formFields1.product_name;
      }
      this.specTypeList.forEach((i) => {
        i.product_no = this.formFields1.product_no;
      });
      let specTypeList = JSON.parse(JSON.stringify(this.specTypeList));
      function isObjectNotEmpty(obj) {
        let v = false;
        for (const key in obj) {
          if (obj[key] == "") {
            v = false;
            break;
          } else {
            v = true;
          }
        }
        return v;
      }

      for (let i = 0; i < specTypeList.length; i++) {
        if (!isObjectNotEmpty(specTypeList[i])) {
          this.$Message.error("规格不能为空");
          status2 = false;
        } else {
          status2 = true;
        }
      }
      if (arrList.length != 0) {
        for (let i = 0; i < arrList.length; i++) {
          let obj = {
            name: "",
            value: [],
          };
          obj.name = arrList[i].name;
          delete arrList[i].name;
          delete arrList[i].id;
          for (const key in arrList[i]) {
            obj.value.push(arrList[i][key]);
          }
          const filteredArray = obj.value.filter((item) => item !== "");
          if (filteredArray.length < 2) {
            status = false;
            this.$Message.error("属性值至少为2个");
            break;
          } else {
            status = true;
          }
          obj.value = filteredArray;
          arr.push(obj);
        }
      } else {
        status = true;
      }
      console.log(this.formFields1);
      let parma = {
        delKeys: null,
        detailData: specTypeList,
        mainData: {
          ...this.formFields1,
          ...this.formFields2,
          product_attr: arr,
          spec_type: this.specType
        },
      };
      console.log(status, status2);
      if (status && status2) {
        this.http.post("/api/Fproduct/update", parma).then((res) => {
          if (res.status) {
            this.model = false;
            this.$Message.success("保存成功");
            this.$store.getters.data().viewPageTest.refresh();
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
  },
};
export default vueParam;
</script>
<style lang="less">
.demoFormInline {
  .el-form-item__label {
    font-size: 12px;
    color: #939394;
  }
  .el-form-item__content {
    font-size: 12px;
    .el-radio__label {
      font-size: 12px;
    }
  }
}
</style>
<style lang="scss" scoped>
.demoFormInline {
  .w70 {
    width: 70px;
  }
  .w100 {
    width: 100px;
  }
  .marL10 {
    margin-left: 10px;
  }
  .mabo10 {
    margin-bottom: 10px;
  }
}
</style>
